<template>
    <el-form :inline="true">
        <el-form-item label="视频地址">
            <el-input v-model="addVideoUrl" placeholder="包含地址即可" clearable></el-input>
        </el-form-item>
        <el-form-item>
            <el-button style="background: #3d3d3d;color: white;" @click="addVideo">添加视频
            </el-button>
        </el-form-item>
    </el-form>

    <el-table v-loading="loading"
              :data="tikTokList"
              border
              style="width: 60%">
        <el-table-column
                type="index"
                label="序号"
                width="60%">
        </el-table-column>
        <el-table-column
                prop="url"
                label="url"
                width="250%">
        </el-table-column>
        <el-table-column
                prop="desc"
                label="desc"
                width="300%">
        </el-table-column>
        <el-table-column label="操作" width="210%">
            <template #default="scope">
                <el-button size="mini" type="info" @click="showVideoDialog(scope.row)">查看视频</el-button>
                <el-popconfirm title="确认删除吗？" @confirm="delVideo(scope.row)">
                    <template #reference>
                        <el-button type="danger" size="mini">删除</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination class="block"
                   layout="prev, pager, next"
                   @current-change="current_change"
                   :page-count="total"
                   style="margin-top: 10px"
    >
    </el-pagination>
    <el-dialog
            v-model="videoDialog"
            title="视频详情"
            width="30%"
            @close="closeVideo">
        <video controls v-if="tikTokVideo.mp4!==null||tikTokVideo.mp4!==''" style="margin-bottom: 5px">
            <source :src="tikTokVideo.mp4" type="video/mp4">
        </video>
        <br>
        <el-button type="success" size="mini"
                   @click="copy(this.tikTokVideo.mp4,$event)">
            复制视频地址
        </el-button>
        <el-button type="success" size="mini"
                   @click="openNew">
            新页面打开视频
        </el-button>
        <br>
        <div style="font-size: small;margin-top: 10px">{{tikTokVideo.desc}}</div>
    </el-dialog>
</template>

<script>
    import {ElMessage} from "element-plus";
    import Clipboard from 'clipboard'

    export default {
        name: "TikTok",
        data() {
            return {
                tikTokList: [],
                loading: false,
                videoDialog: false,
                addVideoDialog: false,
                addVideoUrl: '',
                tikTokVideo: {
                    id: 0,
                    url: '',
                    mp4: '',
                    desc: ''
                },
                total: 0,//默认数据总数
                pageSize: 7,//每页的数据条数
                currentPage: 1,//默认开始页面
            }
        },
        methods: {
            openNew() {
                window.open(this.tikTokVideo.mp4);
            },
            copy(text, event) {
                this.copyText(text, event)
            },
            copySuccess() {
                ElMessage({
                    type: 'success',
                    message: '复制文本成功',
                    duration: 1500
                })
            },
            copyFail() {
                ElMessage({
                    message: '该浏览器不支持自动复制',
                    type: 'warning'
                })
            },
            copyText(text, e) {
                const clipboard = new Clipboard(e.target, {
                    text: () => text
                })
                clipboard.on('success', () => {
                    this.copySuccess()
                    // 释放内存
                    clipboard.destroy()
                })
                clipboard.on('error', () => {
                    // 不支持复制
                    this.copyFail()
                    // 释放内存
                    clipboard.destroy()
                })
                // 解决第一次点击不生效的问题，如果没有，第一次点击会不生效
                clipboard.onClick(e)
            },
            delVideo(row) {
                this.putRequest('/tikTok/deleteVideo?id=' + row.id).then(resp => {
                    if (resp) {
                        this.getTikTokList()
                    }
                })
            },
            addVideo() {
                if (this.addVideoUrl !== '') {
                    this.postRequest('/tikTok/addVideo', {url: this.addVideoUrl}).then(resp => {
                        if (resp) {
                            this.getTikTokList()
                        }
                        this.addVideoUrl = ''
                    })
                } else {
                    ElMessage({
                        message: '视频地址不能为空',
                        type: 'warning',
                    })
                }

            },
            closeVideo() {
                this.videoDialog = false
                this.getTikTokList()
            },
            current_change: function (currentPage) {
                this.currentPage = currentPage
                this.getTikTokList()
            },
            getTikTokList() {
                this.getRequest('/tikTok/getTikTokList?index=' + this.currentPage + '&limit=' + this.pageSize).then(resp => {
                    if (resp) {
                        this.tikTokList = resp.data.list
                        this.currentPage = resp.data.curIndex
                        this.total = resp.data.totalPage
                    }
                })

            },
            showVideoDialog(row) {
                this.tikTokVideo = {}
                this.loading = true
                this.getRequest('/tikTok/getTikTokVideo?id=' + row.id).then(resp => {
                    if (resp) {
                        this.tikTokVideo = resp.data
                        console.log(this.tikTokVideo)
                        this.videoDialog = true
                    }
                    this.loading = false
                }).catch(error => {
                    this.loading = false
                })


            }
        },
        mounted() {
            this.getTikTokList()
        }

    }
</script>

<style scoped>

</style>
